<template>
  <div class="home">
    <Header></Header>
    <div class="p-40 button-nav">
      <div class="flex space-around" style="width: 800px;margin: auto;">
<!--        <div class="bg-shadow border-radius bg-white text-center pt-50 pb-30 pointer"-->
<!--             @click="goUrl('/learn/index')"-->
<!--             style="width: 30%">-->
<!--          <img src="@/assets/images/ks-img01.png" alt="">-->
<!--          <div class="font-bold font-18 mt-40">在线学习</div>-->
<!--          <div class="font-14 color-grey mt-10">点击进行在线试题学习</div>-->
<!--          <div class="font-14 color-grey mt-10">复习题库下载</div>-->
<!--        </div>-->
        <div class="bg-shadow border-radius bg-white text-center pt-50 pb-30 pointer"
             @click="goUrl('/exam/index')"
             style="width: 30%">
          <img src="@/assets/images/ks-img02.png" alt="">
          <div class="font-bold font-18 mt-40">开始考试</div>
          <div class="font-14 color-grey mt-10">考试时间为60分钟</div>
        </div>
        <div class="bg-shadow border-radius bg-white text-center pt-50 pb-30 pointer"
             @click="goUrl('/login')"
             style="width: 30%" v-if="!showUser">
          <img src="@/assets/images/ks-img01.png" alt="">
          <div class="font-bold font-18 mt-40">考生登录</div>
          <div class="font-14 color-grey mt-10">点击进入考生登录页面</div>
        </div>
        <div class="bg-shadow border-radius bg-white text-center pt-50 pb-30 pointer"
             @click="goUrl('/user')"
             style="width: 30%" v-if="showUser">
          <img src="@/assets/images/ks-img01.png" alt="">
          <div class="font-bold font-18 mt-40">考生信息</div>
          <div class="font-14 color-grey mt-10">点击查看考生信息</div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'

import Header from "@/components/Header"
import Footer from "@/components/Footer"
export default {
  name: 'HomeView',
  components: {
    Header,Footer
  },
  data() {
    return{
      showUser: false
    }
  },
  mounted() {
    const user = localStorage.getItem('xx-token')
    if (user) {
      this.showUser = true
    }
  },
  methods: {
    goUrl(url) {
      const _this = this
      const user = localStorage.getItem('xx-token')
      if (!user && url !== '/login') {
        ElMessage.error('请先登录考生')
        setTimeout(()=>{
          _this.$router.push('/login')
        }, 1000)
      } else {
        _this.$router.push(url)
      }
      // _this.$router.push(url)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
